<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>First Consult</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#bookAppointmentBtn").hide();
	$("#div1").hide();
	$("#div2").hide();
		
	$("#showAppointmentBtn").click(function(){
	var appointmentDate = $("#appointmentdate").val();
	var doctorId = "${doctor.doctorid}";
	  if(appointmentDate == null || appointmentDate == ""){
		    $("#dateError").show();
	  }else{
		   $.ajax({url:"ShowAppointments",data: { date: appointmentDate, doctorid: doctorId},success:function(result){
			    $("#div1").html(result);
			    $("#div1").show();
			    $("#bookAppointmentBtn").show();
			    $("#dateError").hide();
		  }});
	}
	});
	
	$("#bookAppointmentBtn").click(function(){
		var appointmentDate = $("input[type='radio'][name='time']:checked").val();
		var doctorId = "${doctor.doctorid}";
		var userId = "<%= session.getAttribute("userid") %>";		
		  if(appointmentDate == null || appointmentDate == ""){
			  $("#timeError").show();
		  }else{
				  $.ajax({url:"BookAppointment",data: { time: appointmentDate, doctorid: doctorId, userid: userId},success:function(result){
		    $("#div2").html(result);
		    $("#div1").hide();
		    $("#div2").show();
		    $("#bookAppointmentBtn").hide();
		    $("#timeError").hide();
		  	}});
		 }
	});
	
	$("#addDoctorListBtn").click(function(){
		var doctorId = "${doctor.doctorid}";
		var userId = "<%= session.getAttribute("userid") %>";		
		 $.ajax({url:"AddDoctorList", type:"post" ,asynch:false, data: {  doctorid: doctorId, userid: userId},success:function(data)
		 {
			  $("#successlist").html(data);
		}  
	  });
	});
	
	function showMap(){
		
		var geocoder;
		var map;
		  geocoder = new google.maps.Geocoder();
		  var latlng = new google.maps.LatLng(-34.397, 150.644);
		  var mapOptions = {
		    zoom: 14,
		    center: latlng
		  }
		  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

		 var address = "${doctor.clinicaddress}";
		  geocoder.geocode( { 'address': address}, function(results, status) {
		    if (status == google.maps.GeocoderStatus.OK) {
		      map.setCenter(results[0].geometry.location);
		      var marker = new google.maps.Marker({
		          map: map,
		          position: results[0].geometry.location
		      });
		    } else {
		      alert('Geocode was not successful for the following reason: ' + status);
		    }
		  });
	}
	showMap();
});
</script>
</head>

<body>
<div id="bodyPan">
  <div id="middlePan">
		<div id="middlebodyPan">
		 <h1>Profile</h1>
    		<form id="form1" runat="server">
		      <div id="docImageDiv" style="width:100px; height:150px; float: left; padding-left: 10px; padding-right: 30px; padding-top: 25px;">
		         <img id="doctorImage" src="images/Dr_${doctor.lastname}.jpg" width=100px height=100px" border="1"/>
		         <input type="button" name="addDoctorList" id="addDoctorListBtn" value="Add to Network"> 
	    		<div id="successlist">
		
				</div>
		      </div>
				
		      <table id="search-details" width="480px" style="float: left;padding-bottom: 50px;">
		      <tr>
		      	<td colspan="2">
		       		<h4>${doctor.firstname} ${doctor.lastname}</h4>
		      	</td>
		      </tr>
		      
		      <tr>
		       <td>Gender</td>
		       <td style="padding-left: 25px;">${doctor.gender}</td>
		      </tr>
		      
		      <tr>
		        <td>Email ID</td>
		            <td style="padding-left: 25px;">${doctor.email}</td>
		      </tr>
		      
		      <tr>
		            <td>Specialization</td>
		            <td style="padding-left: 25px;">${doctor.specialization}</td>
		      </tr><br /> 
		      
		      <tr>
		            <td>Associated Clinic/Hospital</td>
		            <td style="padding-left: 25px;">${doctor.clinicname}</td>
		      </tr>
		      <tr> </tr>
		      <tr> </tr>
		      <tr> </tr>
		      <tr> </tr> <tr> </tr>
		      <tr> </tr>
		      
		      <tr>
		            <td valign="top">Clinic Address</td>
		            <td style="padding-left: 25px;">${doctor.clinicaddress}<br />PIN- ${doctor.cliniczip}<br /></td>
		      </tr>
		        <tr> <td> </td> <td> </td></tr>
		        <tr> <td> </td> <td> </td></tr>
		        <tr> <td> </td> <td> </td></tr>
		        
		        <tr>
		            <td>Phone</td>
		            <td style="padding-left: 25px;">${doctor.phone}</td>
		        </tr>
		        <tr>
		            <td>Office Hours</td>
		            <td style="padding-left: 25px;">${doctor.hours}</td>
		        </tr>
		        <tr>
		            <td>Website</td>
		            <td style="padding-left: 25px;">${doctor.website}</td>
		        </tr>
		   </table>
		   
		   <div style="padding:20px;">
		   	<h3>Make Appointment</h3>
		   		<br>Select a date : 
		        <input type="date" name="appointmentdate" id="appointmentdate"> 
		        <span id="dateError" style="display:none;color:red;">Pick a date</span><br><br>
		        <input type="button" name="showAppointmentBtn" id="showAppointmentBtn" value="Show Available Appointments"/><br><br>
		      
			   <span id="timeError" style="display:none;color:red;">Pick a time</span><br>
			  
			   <div id="div1">
			        
			   </div> 
			  <div id="div2" style="padding: 20px;text-align: center;border: 5px solid green;font-weight: bold;">
			        
			   </div> <br>
		
		       <input type="button" name="bookAppointmentBtn" id="bookAppointmentBtn" value="Book Appointment"> 
		    </div>        
		    <div id="map-canvas" style="width: 90%; height: 300px; margin-left:30px;border:1px solid;"></div>
	</form>
		   
		</div>
	</div>
</div>
</body>
</html>